<template>
  <div>
    <h3>实验01：给后端发送一个GET请求，获取 JSON 数据</h3>
    <p>后端的访问地址 http://localhost:8081/TigerServletGetAll</p>
    <button @click="ex01ClickHandler">点击按钮发送请求</button>
    <table>
      <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>SALARY</th>
      </tr>
      <tr v-if="tigerList == null || tigerList.length == 0">
        <td colspan="3">抱歉！没有查询到您需要的数据</td>
      </tr>
      <tr v-else v-for="tiger in tigerList">
        <td>{{tiger.tigerId}}</td>
        <td>{{tiger.tigerName}}</td>
        <td>{{tiger.tigerAge}}</td>
      </tr>
    </table>

    <h3>实验02：给后端发送一个GET请求携带一个请求参数</h3>
    <p>单独一条记录：{{tiger}}</p>
    <button @click="ex02ClickHandler">点击按钮发送请求</button>

    <h3>实验03：给后端发送一个GET请求携带三个请求参数</h3>
    老虎名字：<input type="text" v-model="tiger.tigerName" /><br/>
    老虎年龄：<input type="text" v-model="tiger.tigerAge" /><br/>
    老虎工资：<input type="text" v-model="tiger.tigerSalary" /><br/>
    <button @click="ex03ClickHandler">点击按钮发送请求</button>

    <h3>实验04：给后端发送一个POST请求，请求体是 JSON 数据</h3>
    老虎id：<input type="text" v-model="tiger.tigerId" /><br/>
    老虎名字：<input type="text" v-model="tiger.tigerName" /><br/>
    老虎年龄：<input type="text" v-model="tiger.tigerAge" /><br/>
    老虎工资：<input type="text" v-model="tiger.tigerSalary" /><br/>
    <button @click="ex04ClickHandler">点击按钮发送请求</button>
  </div>
</template>

<script setup>
// -----------------------导入区-----------------------
import {reactive, ref} from "vue";
import axiosInstance from "./config/axios.js";

// -----------------------数据区-----------------------
// 创建 axios 实例对象，后续调用这个实例对象给后端发请求
// baseURL：会附加到每一个请求路径前面的 URL 地址
// timeout：前端给后端发请求的超时时间
// Axios 实例对象创建统一提取到了专门的配置文件，这里就不需要写了
// let axiosInstance = axios.create({
//   "baseURL":"/api",
//   "timeout":10000
// });

// 创建 reactive() 包装的响应式对象
let tigerList = reactive([]);
let tiger = ref({});

// -----------------------功能区-----------------------
const ex01ClickHandler = async () => {
  console.log("发送请求之前~~~")
  // 给后端发送请求，调用 get() 方法就是发送 GET 请求
  // get() 方法参数一：后端资源的 URL 地址
  // get() 方法参数二：当前请求的配置对象
  // ---------------------------------------
  // 接收后端返回的响应
  // get() 方法的返回值是一个 Promise 对象
  // 于是我们推测：给后端发送请求就是 Promise 对象的主体任务
  // 后端返回响应状态码 200，就是代表主体任务成功
  // 所以我们直接加上 await 就能够获取 Promise 任务执行的结果，而这个结果恰好就是后端返回的响应（被 Axios 框架封装为了对象）
  // let response = await axiosInstance.get("/TigerServletGetAll");
  // console.log(response)
  // console.log(response.data)

  // response 对象的 data 属性就是响应体
  // 所以这里我们使用解构表达式，直接获取响应体
  let {data} = await axiosInstance.get("/TigerServletGetAll");
  console.log(data)

  // 为了避免重复数据，在添加新数据时，把旧数据清空
  tigerList.splice(0, tigerList.length);

  // 拿到响应体数据之后，给 tigerList 赋值
  tigerList.push(...data);
}

const ex02ClickHandler = async () => {
  let {data} = await axiosInstance.get("/TigerServletGetById?tigerId=4");
  tiger.value = data;
}

const ex03ClickHandler = async () => {
  // config 参数的 params 属性，是设置请求携带的请求参数
  // let {data} = await axiosInstance.get("/TigerServletSave", {
  //   params: {
  //     tigerName: tiger.value.tigerName,
  //     tigerAge: tiger.value.tigerAge,
  //     tigerSalary: tiger.value.tigerSalary
  //   }
  // });

  // 直接使用 tiger.value 给 params 赋值，也都能够对应得上
  let {data} = await axiosInstance.get("/TigerServletSave", {
    params: tiger.value,

    // 使用 headers 属性设置请求消息头，携带到后端
    headers: {
      atguigu: "atguigu very happy~~~"
    }
  });

  console.log(`data = ${data}`)
}

const ex04ClickHandler = async () => {
  let {data} = await axiosInstance.post("/TigerServletUpdate", tiger.value);
  console.log(`data = ${data}`)
}
</script>
<style scoped>
button {
  border: 1px solid black;
}

table {
  border: 1px solid black;
  border-collapse: collapse;
  margin: 15px auto 0px auto;
}

td, th {
  border: 1px solid black;
}
</style>
